
<style>
  .banner{
    background: #ccc url(/pub/images/bgp.jpg) center center no-repeat;
    background-size: cover;

    aspect-ratio: 6 /1;
  }

  header{
    background-color: #000;
    color:#fff
  }

  nav{
    line-height: 2;
    
  }

  .menu-nav-chy{
    display: flex;
    gap:2rem;
  }

  .menu-nav-chy > .menu-item {
    position: relative;
    padding: .5rem 0;
    text-align: center;

  }

  .menu-nav-chy .sub-menu{
    display: none;
    padding:1rem;

    position: absolute;
    top:100%;
    /* left:-50%; */
    white-space: nowrap;

    line-height: 2;
  }

  .menu-nav-chy .current-category-ancestor > a, .menu-nav-chy .current-menu-item a[aria-current]{
    color:red;
    font-weight: bold;
  }


  .menu-item-has-children:hover .sub-menu{
    background-color: #0000008f;
    display: block;
  }


  @media screen and (min-width: 1204px)  {

  }


</style>
<!-- <link rel="stylesheet" href="/pub/ext/bootstrap/css/bootstrap.min.css"> -->

<header>

  <div class="cbox mx-auto py-4 flex justify-between items-center ">

    <div>
      <img class="h-12" src="<?php echo get_field('logo', 1840)['url']; ?>" alt="<?=bloginfo('name')?>">
      
    </div>

    <?php 
    wp_nav_menu([
      'menu'=>'header-nav-chy', //调用菜单的名称
      'menu_class'=>'menu-nav-chy', //构成菜单的ul元素的CSS类，默认 'menu'
      'depth'=>2, //菜单级别，0为无限制
      'container'=>'nav'
    ]); 
    ?>

  </div>

</header>

<div class="banner">

</div>


<pre class="hidden">
  <code>

    <?php 

    print_r(get_field('logo', 1840));
    
    ?>

  </code>

</pre>


<!-- <script src="/pub/ext/bootstrap/js/bootstrap.min.js"></script> -->